export const addTagSelector = (editor) => {
    const { Components } = editor;
    Components.addType('tagSelector', {
        model: {
            defaults: {
                name: 'tagSelector',
                droppable: false,
                attributes: { class: '','data-gjs-type':"tagSelector" },
                components: [
                    {
                        type: 'div',
                        attributes: { class: 'tagSelector-card-wrapper' },
                        resizable: true, // 允许调整大小
                        components: [
                            {
                                type: 'div',
                                attributes: { class: 'tag-list' },
                                components: [
                                    { type: 'text', attributes: { class: 'tag active' }, content: '全部' },
                                    { type: 'text', attributes: { class: 'tag' }, content: '市政路桥隧' },
                                    { type: 'text', attributes: { class: 'tag' }, content: '建筑' },
                                    { type: 'text', attributes: { class: 'tag' }, content: '工厂' },
                                    { type: 'text', attributes: { class: 'tag' }, content: '平台定制开发' },
                                    { type: 'text', attributes: { class: 'tag' }, content: 'Bentley/Revit软件二次开发' },
                                    
                                ],
                            },
                            {
                                type: 'div',
                                components: [
                                    { type: 'customCheckbox'},
                                    { type: 'customCheckbox'},
                                    { type: 'customCheckbox'},
                                ],
                            },
                        ],
                    },
                ],
                script() {
                    const tagsContainer = this.querySelector('.tag-list');

                    tagsContainer.addEventListener('click', function(event) {
                        const clickedTag = event.target.closest('.tag');
                        if (!clickedTag) return;

                     
                            // 切换选中状态
                            tagsContainer.querySelectorAll('.tag').forEach(tag => tag.classList.remove('active'));
                            clickedTag.classList.add('active');
                        
                    });
                },
                styles: `
                .tagSelector-card-wrapper {
                    border: 1px solid #e0e0e0;
                    border-radius: 8px;
                    width: 80%;
                    margin-left: 10%;
                    margin-right: 10%;
                    padding: 20px;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
                }
                
                .tag-list {
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                }
                
                .tag {
                    padding: 10px 20px;
                    cursor: pointer;
                    font-size: 16px;
                    font-weight: bold;
                    color: #666;
                    background-color: #f1f1f1;
                    border-radius: 4px;
                    margin: 0 5px;
                    transition: background-color 0.3s, color 0.3s;
                }
                
                .tag:hover {
                    background-color: #e0e0e0;
                }
                
                .tag.active {
                    background-color: #2196F3;
                    color: white;
                }
                .tag.add-tag {
                    background-color: #f1f1f1;
                    color: #666;
                    cursor: pointer;
                }
                .tag.add-tag:hover {
                    background-color: #e0e0e0;
                }
                `,
            },
        },
    });

    // 注册 tagSelector 组件
    editor.BlockManager.add('tag-selector', {
        label: '标签选择组件',
        category: '组件类',
        media:`<svg t="1720769178120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32560" width="30" height="30"><path d="M465.454545 194.466909l510.533818 0 0 42.263273-510.533818 0 0-42.263273Z" p-id="32561"></path><path d="M46.545455 384.651636l338.501818 0L385.047273 46.545455 46.545455 46.545455 46.545455 384.651636zM88.855273 88.808727l253.882182 0 0 253.579636L88.855273 342.388364 88.855273 88.808727z" p-id="32562"></path><path d="M466.920727 787.269818l510.533818 0 0 42.263273-510.533818 0 0-42.263273Z" p-id="32563"></path><path d="M46.545455 977.454545l338.501818 0L385.047273 639.348364 46.545455 639.348364 46.545455 977.454545zM88.855273 681.634909l253.882182 0 0 253.579636L88.855273 935.214545 88.855273 681.634909z" p-id="32564"></path></svg>`,
        content: { type: 'tagSelector' },
    });
};
